<template>
    <el-card class="box-middle-barrage">
        <el-card class="showBarrage">
            <!-- 这里放弹幕 -->
            <span
                v-for="item in bulletScreens"
                :key="item.id"
                :class="item.clas"
                @animationend="done(item)"
                :style="{'top':item.height+'vh'}"
            >{{ item.text }}</span>
        </el-card>
        <el-row>
            <el-col :span="4">
                <div style="text-align: center;margin-top: 1vh;">在线人数:{{ config.currentOnLineUserCount }}</div>
            </el-col>
            <el-col :span="20" style="margin-top:.5vh">
                <el-input v-model="userInputText" placeholder="开始聊天吧" class="input-with-select">
                    <template #append>
                        <el-button @click="send()" :disabled="config.sendMessageButtonDisabled">发送</el-button>
                    </template>
                </el-input>
            </el-col>
        </el-row>
    </el-card>
</template>
<script>
import {nextTick, reactive, ref} from "vue";
import UserUtil from "@/utils/UserUtil";
import StringUtil from "@/utils/StringUtil";
import InfoUtil from "@/utils/InfoUtil";
import "@/utils/ProjectConstant"

//弹幕封装类
class BulletScreen {
    id;
    text;
    clas = "move";
    height = Math.random() * 19 + 1;

    constructor(text) {
        this.text = text;
        this.id = new Date().getTime();
    }
}

export default {
    setup() {
        let userInputText = ref("");
        let bulletScreens = reactive([]);
        let token = UserUtil.getToken();
        let config = reactive({
            //当前在线用户总数
            currentOnLineUserCount: 0,
            //发送消息按钮是否禁用
            sendMessageButtonDisabled: false
        })
        let ws = new WebSocket("ws://localhost:8877/bulletScreen", [token]);
        ws.onopen = function () {
            //当WebSocket创建成功时，触发onopen事件
        };
        ws.onmessage = function (e) {
            let responseData = JSON.parse(e.data);
            if (responseData.type === WEBSOCKET_SEND_BULLET_SCREEN) {
                bulletScreens.push(JSON.parse(responseData.data));
            } else if (responseData.type === WEBSOCKET_UPDATE_CURRENT_ON_LINE_USER_COUNT) {
                config.currentOnLineUserCount = responseData.data;
            }

        };
        ws.onclose = function (e) {
            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
        };
        ws.onerror = function (e) {
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
        };

        const send = () => {
            if (StringUtil.isEmpty(userInputText.value)) {
                InfoUtil.warning("不能发送空内容哦")
                return
            }
            config.sendMessageButtonDisabled = true;
            let bulletScreen = new BulletScreen(userInputText.value);
            let sendRequestData = JSON.stringify(bulletScreen);
            ws.send(sendRequestData);
            userInputText.value = "";
            setTimeout(() => {
                config.sendMessageButtonDisabled = false;
            }, 500)
        };
        const done = (item) => {
            item.clas = "done";
            nextTick(() => {
                let index = bulletScreens.indexOf(item);
                if (index > -1) {
                    bulletScreens.splice(index, 1);
                }
            });
        };
        return {
            send, done,
            userInputText, config, bulletScreens,

        };
    }
};
</script>
<style lang="scss" scoped>
.box-middle-barrage {
    width: 100%;
    height: 30vh;

    .showBarrage {
        position: relative;
        width: 100%;
        height: 23vh;
    }
}

.move {
    position: absolute;
    white-space: nowrap;
    border-radius: 10px;
    padding: 0px 5px 0px 5px;
    background-color: antiquewhite;
    color: rgb(50, 126, 126);
    animation: move 15s linear;
}

.move:hover {
    animation-play-state: paused;
}

.done {
    position: absolute;
    left: -50vw;
    white-space: nowrap;
    display: none;
}

@keyframes move {
    from {
        left: 40vw;
    }
    to {
        left: -50vw;
    }
}
</style>